<template>
	<view>
		<view class="confirm_order" :style="{paddingTop: vuex_custom_bar_height+ 'px'}">
			<tn-nav-bar  :alpha="true">提交预订</tn-nav-bar>
			
			<view class="head">
				<view class="title">{{activity.title}}</view>
				<view class="name">布芒的家</view>
			</view>
			
			<view class="date tn-radius10">
				<view class="title">活动日期</view>
				<view class="dateTime tn-radius10">{{activity.start_time| parseTime('{m}月{d}日 {h}:{i}')}} - {{activity.end_time| parseTime('{m}月{d}日  {h}:{i}')}}</view>
			</view>
			
			<view class="date tn-radius10">
				<view class="header">
					<span class="title">{{activity.title}} 单人票</span>
					<changeNumber @forceNumber="forceNumber"></changeNumber>
				</view>
				<view class="tips" v-if="user.is_mentor">选择</view>
				<view class="shenfen" v-if="user.is_mentor">
					<view class="one tn-radius10 " :class="selectShenFen=='mentor'?'selected':''" @tap="changeShenfen('mentor')">我要成为导师</view>
					<view class="one tn-radius10" :class="selectShenFen=='user'?'selected':''" @tap="changeShenfen('user')">我要参与活动</view>
				</view>
			</view>
			
			<view class="date tn-radius10">
				<view class="title">备注</view>
				<view><input type="text" v-model="form.note" class="mark" placeholder="请在此填写"/></view>
				<view class="title tn-margin-top tn-padding-bottom-sm border-bottom">
					客户信息
					<span class="tip">（若购买多张票仅需填写1位游客信息）</span>
				</view>
				
				<view class="input">
					<span class="label">昵称</span>
					<span><input type="text" v-model="form.order_user_name" placeholder="点击添加"/></span>
				</view>
				
				<view class="input">
					<span class="label">联系方式</span>
					<span><input type="text" v-model="form.order_mobile" placeholder="点击添加"/></span>
				</view>
				
			</view>
			
			
			<view class="date tn-radius10">
				<view class="title">活动需知 </view>
				<view class="content"></view>
			</view>
		</view>
		
		<TemplateLoading :active="loading"></TemplateLoading>
		
		<view class="footer tn-flex">
			<view class="price">
				<span style="font-size: 18rpx;">总额</span>
				<span class="amount">￥{{totalAmount}}</span>
				<span style="font-size: 18rpx;">明细 <i class="tn-icon-down icons"></i></span>
			</view>
			<view class="order-btn tn-radius10" @tap="orderSub">支付</view>
		</view>
	</view>
</template>

<script>
	import changeNumber from '@/components/change-number/change-number.vue';
	import {detailObj} from '@/api/activity/index.js'
	import {confirmOrder,confirmOrderCoupon,subOrder,prePay} from '@/api/order/order.js'
	import store from '@/store/index.js'
	
	export default {
		components:{changeNumber},
		data() {
			return {
				selectShenFen:"mentor",
				totalAmount:0,
				loading:false,
				activity:{},
				user:{},
				form:{
					type:2,
					activity_id:"",
					order_mobile:"",
					order_user_name:"",
					note:"",
					order_number:1,
					coupon_id:"",
					is_mentor:0
				}
			}
		},
		onLoad(e) {
			this.user = store.state?.vuex_user
			if(!this.user?.is_mentor){
				this.selectShenFen = "user"
				this.form.is_mentor = 1
			}
			this.form.activity_id = e.id
			this.initData()
		},
		methods: {
			orderSub(){
				
				if(!this.form.order_mobile  || this.form.order_mobile.length != 11){
					uni.showToast({
						title: '联系方式不能为空',
						duration: 2000,
						icon:"none"
					})
					
					
					return false
				}
				
				if(!this.form.order_user_name  || this.form.order_user_name.length < 2){
					uni.showToast({
						title: '联系人不能为空',
						duration: 2000,
						icon:"none"
					})
					
					return false
				}
				
				if(this.form.note == "" ){
					uni.showToast({
						title: '备注不能为空',
						duration: 2000,
						icon:"none"
					})
					
					return false
				}
				
				if(this.selectShenFen=="mentor" && this.form.order_number != 1){
					uni.showToast({
						title: '导师只能选择1张票',
						duration: 2000,
						icon:"none"	
					})
					
					return false
				}
				
				if(this.selectShenFen=="mentor"){
					this.form.is_mentor = 1
				}else{
					this.form.is_mentor = 0
				}
				
				// TODO 提交订单
				this.loading = true
				
				subOrder(this.form).then(res=>{
					if(this.selectShenFen=="mentor"){
						uni.showToast({
							icon:'none',
							title:"报名成功，请等待审核",
							duration:2000
						})
						
						setTimeout(function(){
							uni.navigateTo({
							  url: '/pages/activity/detail?id='+this.form.activity_id
							}) 
						},2000)
					}else{
						uni.navigateTo({
						  url: '/pages/order/pay/pay?order_sn='+res.order_sn
						})
						//this.payOrder(res)
					}
					
					this.loading = false
				}, err=>{
					this.loading = false
				})
			},
			payOrder(res){
				prePay({order_sn:res.order_sn}).then(re=>{
					uni.requestPayment({
					    "provider": "wxpay",
					    "orderInfo": {
					        "appid": re.appid,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
					        "noncestr": re.noncestr, // 随机字符串
					        "package": re.package,        // 固定值
					        "partnerid": re.partnerid,      // 微信支付商户号
					        "prepayid":re.prepayid, // 统一下单订单号
					        "timestamp": re.timestamp,        // 时间戳（单位：秒）
					        "sign": re.sign // 签名，这里用的 MD5/RSA 签名
					    },
					    success(res) {
							
							uni.showModal({
								//title: '提示',
								content: '订单支付已成功',
								success: function (res) {
								},
								complete:function(){
									uni.navigateTo({
									  url: '/pages/index/index?index=4'
									})
								}
							});
						},
					    fail(e) {
							uni.showToast({
								title: '支付已取消',
								duration: 3000,
								icon:"exception"	
							})
						}
					})
				},err=>{
					uni.navigateTo({
					  url: '/pages/order/pay/pay?order_sn='+res.order_sn
					})
				})
				
			},
			forceNumber(num){
				if(this.selectShenFen=="mentor" && num != 1){
					uni.showToast({
						title: '导师只能选择1张票',
						duration: 2000,
						icon:"exception"
					})
					
					return false
				}
				
				this.form.order_number = num
				
				this.initPrice()
			},
			changeShenfen(t){
				this.selectShenFen = t
				this.initPrice()
			},
			initData(){
				this.loading = true
				confirmOrder({id:this.form.activity_id,type:2}).then(res=>{
					this.activity = res
					
					if(res.orderUser){
						this.form.order_user_name = res.orderUser?.order_user_name
						this.form.order_mobile = res.orderUser?.order_mobile
					}
					
					this.initPrice()
					
					this.loading = false
				},err=>{
					this.loading = false
				})
			},
			initPrice(){
				if(this.selectShenFen == 'mentor'){
					this.is_mentor = 1
				}else{
					this.is_mentor = 0
				}
				
				if(this.selectShenFen == 'mentor'){
					this.totalAmount = (0).toFixed(2)
				}else{
					this.totalAmount = (this.activity.price * this.form.order_number).toFixed(2)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
  .confirm_order{
	  background: $tn-main-bg;
	  height: 100vh;
  }
  
  .head{
	  background: $tn-main-orange;
	  height: 243rpx;
	  padding-left: 6%;
	  padding-right: 6%;
	  padding-top: 68rpx;
	  color: #fff;
	  .title{
		  font-size: 48rpx;
	  }
	  .name{
		  margin-top: 18rpx;
		  font-size: 24rpx;
	  }
  }
  
   .tn-radius10{border-radius: 10rpx;}
  
  .date:first{
	 margin-top: -8rpx;  
  }
  .date{
	  background: #fff;
	  padding-bottom: 23rpx;
	  margin-bottom: 18rpx;
	  padding-left: 6%;
	  padding-right: 6%;
	  padding-top: 30rpx;

	  
	  .title{
		color: $tn-main-orange;
		margin-bottom: 14rpx;
		font-size: 36rpx;
		
		.tip{
			font-size: 18rpx;
			color: #6c6b6b;
		}
	  }
	  
	  .title.border-bottom{
		  border-bottom: 1px solid #c0c0c0;
	  }
	  
	  .dateTime{
		  background: $tn-main-orange;
		  height: 82rpx;
		  line-height: 82rpx;
		  text-align: center;
		  color: #fff;
		  font-size: 30rpx;
	  }
	  
	  .header{
		  display: flex;
		  justify-content: space-between;
		.title{
			color: $tn-main-orange;
			font-size: 36rpx;
		} 
		
	  }
	  
	  .tips{
	  	margin: 14rpx 0;
		color: $tn-main-orange;
	  }
	  
	  .shenfen{
		  display: flex;
	  	.one{
	  		padding: 26rpx 29rpx;
	  		background: #e1e1e1;
	  		color: #666666;
	  		font-size: 30rpx;
	  		margin-right: 34rpx;
	  	}
	  	
	  	.one.selected{
	  		border: 1px solid $tn-main-orange;
	  	}
	  	
	  }
	  
	  .mark{
		  border: 0;
		  border-bottom: 1px solid #c0c0c0;
	  }
	  
	  .input{
	  	border-bottom: 1px solid #dfdfdf;
	  	padding-bottom: 25rpx;
	  	line-height: 41rpx;
	  	.label{
	  		width: 138rpx;
	  		display: inline-block;
	  		font-size: 18rpx;
	  	}
	  	
	  	input{
	  		width: 360rpx;
	  		display: inline-block;
	  		font-size: 15rpx;
	  		position: relative;
	  		top: 16rpx;
	  	}
	  }
  }
  
  .footer{
	  z-index: 999;
  	  padding-left: 6%;
  	  padding-right: 6%;
  	  font-size: 34rpx;
  	  bottom: 0;
  	  width: 100%;
  	  display: flex;
  	  position: fixed;
  	  background: #fff;
  	  justify-content: space-between;
  	  padding-top: 25rpx;
  	  padding-bottom: 43rpx;
  	  color: $tn-main-orange;
  	  .order-btn{
  		  color: #fff;
  		  font-size: 32rpx;
  		  background: $tn-main-orange;
  		  padding: 12rpx 22rpx;
  	  }
  	  
  	  .price{
  		  .amount{ margin: 0 13rpx;}
  		  .icons{
  			  margin-left: 7rpx;
  			  display: inline;
  		  }
  	  }
  }

</style>
